<template>
    <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
            {{ nowValue }}<i class="el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="1" v-if="!isShow">大于</el-dropdown-item>
            <el-dropdown-item command="2" v-if="!isShow">小于</el-dropdown-item>
            <el-dropdown-item command="3">等于</el-dropdown-item>
            <el-dropdown-item command="4" v-if="!isShow">介于</el-dropdown-item>
            <el-dropdown-item command="5">包含</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
    model: {
        prop: "value",
        event: "change"
    }
})
export default class MyName extends Vue {
    @Prop({
        type: String,
        default: "3"
    })
    readonly value!: string;

    @Prop({
        type: Boolean,
        default: true
    })
    readonly isShow!: boolean;

    nowValue = "包含";

    mounted() {
        if (this.value === "1") {
            this.nowValue = "大于";
        }
        if (this.value === "2") {
            this.nowValue = "小于";
        }
        if (this.value === "3") {
            this.nowValue = "等于";
        }
        if (this.value === "4") {
            this.nowValue = "介于";
        }
        if (this.value === "5") {
            this.nowValue = "包含";
        }
    }

    handleCommand(command: any) {
        switch (command) {
        case "1":
            this.nowValue = "大于";
            break;
        case "2":
            this.nowValue = "小于";
            break;
        case "3":
            this.nowValue = "等于";
            break;
        case "4":
            this.nowValue = "介于";
            break;
        case "5":
            this.nowValue = "包含";
            break;
        }
        this.$emit("change", command);
    }
}
</script>

<style lang="scss" scoped>
.el-dropdown-link {
    color: #2C82C9;
    font-size: 14px;
    display: inline-block;
    width: 36px;
    cursor: pointer;
}
</style>
